<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    {#      图标位置#}
    {#    <link rel="icon" href="../../favicon.ico">#}
    {#    <title>ORATK</title>#}
    <title>oratk 运维平台</title>
    {% block title %}
    {% endblock %}
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap-3.3/css/bootstrap.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/static/bootstrap-3.3/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/bootstrap-3.3/css/dashboard.css" rel="stylesheet">
    <link href="/static/daterangepicker/css/daterangepicker.css" rel="stylesheet" type="text/css">

    <!-- loading_css -->
    <link href="/static/loading_css.css" rel="stylesheet">
    <link href="/static/loading_css_2.css" rel="stylesheet">
    <link href="/static/loading_css_tea.css" rel="stylesheet">
    <script src="/static/jquery-1.12.4.js"></script>
    <script>window.jQuery || document.write('<script src="/static/jquery-1.12.4.js""><\/script>')</script>
    <script src="/static/bootstrap-3.3/js/bootstrap.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="/static/bootstrap-3.3/js/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/bootstrap-3.3/js/ie10-viewport-bug-workaround.js"></script>
    {#时间#}
    <script src="/static/daterangepicker/js/moment.min.js"></script>
    <script src="/static/daterangepicker/js/daterangepicker.js"></script>
    <!-- bootstrap-select -->
    {#    <link rel="stylesheet"#}
    {#          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">#}
    {#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>#}

    <script src="/static/bootstrap-select/1.12.4/bootstrap-select.min.js"></script>
    <link href="/static/bootstrap-select/1.12.4/bootstrap-select.min.css" rel="stylesheet">
    {#    添加截屏js#}
    <script src="/static/canvas2image.js"></script>
    <script src="/static/html2canvas.min.js"></script>

    {% block link_script %}
    {% endblock %}
    {% block style %}
    {% endblock %}

</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    {#<nav class="blog-masthead">#}
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">oratk工具</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <a class="navbar-brand navbar-right">
                <button type="button" class="btn btn-primary" onclick="save_html_as_png()"><span
                        class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbsp截屏
                </button>
            </a>
            <a class="navbar-brand navbar-right" href="/basic_app/logout">注销</a>
            <a class="navbar-brand navbar-right">{{ request.session.username }}</a>
            <a class="navbar-brand navbar-right">你好，</a>

        </div><!--/.navbar-collapse -->

    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar aaaa">
            <ul class="nav nav-sidebar" id="tag_id">
                {% block tag_left %}
                {% endblock %}
            </ul>
        </div>
        {% block userinfo %}
        {% endblock %}
    </div>
</div>
{#<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">#}
{#    <div style="width: 250px;height:150px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">#}
{#        　　#}
{#        <div class="cssload-thecube">#}
{#            <span>执行中，请稍等。。。</span>#}
{#            <div class="cssload-cube cssload-c1"></div>#}
{#            <div class="cssload-cube cssload-c2"></div>#}
{#            <div class="cssload-cube cssload-c4"></div>#}
{#            <div class="cssload-cube cssload-c3"></div>#}
{#        </div>#}
{#    </div>#}
{#</div>#}
<!--倒茶loading特效-->
<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    {#    <div class="wrapper">#}
    <div class="press">
        <div class="holder"></div>
        <div class="lid"></div>
        <div class="carafe">
            <div class="drop"></div>
            <div class="spout"></div>
            <div class="contents">
                <div class="grounds"></div>
                <div class="water"></div>
            </div>
        </div>
        <div class="plunger">
            <div class="shaft">
                <div class="knob"></div>
            </div>
            <div class="filter"></div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

{#//active 标签#}
{#<script>#}
{#    $(document).ready(function () {#}
{#        var local = window.location.href;#}
{#        var tda = $('.aaaa li a');#}
{#console.log(tda)#}
{#        for (i = 0; i < tda.length; i++) {#}
{#            var search_result = local.toLowerCase().search(tda[i].href.toLowerCase())#}
{#console.log(search_result)#}
{##}
{#            if (search_result != -1) {   //如果当前地址和菜单栏的某个栏目地址相等#}
{#                tda[i].parentElement.className = "active";//当前li标签用active样式#}
{#                console.log(111)#}
{##}
{#                var idn = tda[i].getAttribute('name'); // 获取当前标签的name值#}
{#                console.log(idn)#}
{#                $(idn).collapse('show');      //展开一级菜单#}
{#            }#}
{#        }#}
{#    })#}
{#</script>#}
<script>

    //模态框居中
    $("#myModal").on('show.bs.modal', function () {
        modalResize();
    })
    $(window).resize(function () {
        modalResize();
    })

    function modalResize() {
        var winWidth = $(document.body).width();
        var modalWidth = $("#docModalContent").width();
        var width = (winWidth - modalWidth) / 2 + "px"
        {#console.log(winWidth, modalWidth, width)#}
        $("#myModal").find(".modal-dialog").css({
            'margin-left': width
        });
    }

    //展示loading框
    showLoading = function () {
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
    }
    //隐藏掉loading框
    hideLoading = function () {
        $('#loadingModal').modal('hide');
    }
    $(document).ready(function () {
        //获取整个url
        {#var local = window.location.href;#}
        //获取不带参数的url
        var local = window.location.protocol+"//"+window.location.host+""+window.location.pathname;
        {#var tda = $('.aaaa ul ul a');#}
        var tda = $('.aaaa ul  a');
        {#console.log(tda)#}
        for (i = 0; i < tda.length; i++) {
            if (tda[i].href.toLowerCase() == local.toLowerCase()) {   //如果当前地址和菜单栏的某个栏目地址相等
                tda[i].style = "color:#F00";//当前li标签用active样式
                var idn = tda[i].getAttribute('name'); // 获取当前标签的name值
                {#console.log(idn);#}
                $("#" + idn).css("color", "red");
                var dt = $("#" + idn).attr('name');
                $("#" + dt).collapse('show');
            }
        }
        //开启提示框
        $('[data-toggle="tooltip"]').tooltip();
    })

    //截屏js
    function save_html_as_png(filename = 'ora_screenshot') {
        var opts = {
            //scale: scale, // 添加的scale 参数
            //canvas: canvas, //自定义 canvas
            //logging: false, //日志开关，便于查看html2canvas的内部执行流程
            //width: width, //dom 原始宽度
            //height: height,
            useCORS: true // 【重要】开启跨域配置
        };
        html2canvas($('body')[0], opts).then(canvas => {
            //document.body.appendChild(canvas);
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            console.log(canvasHeight, canvasWidth);
            //sleep(2);
            // 调用Canvas2Image插件
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // 调用Canvas2Image插件
            Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename);
            console.log('ok');
        });
    }
</script>
{% block script %}
{% endblock %}
</body>

</html>
